<template>
  <div id="menu">
    <el-menu class="menu" :default-active="defult">
      <component :is="componentId(item)" v-for="item in menuList" :key="item.id" :item="item" />
    </el-menu>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { MenuItem } from '@/types/index.ts'
import oneMenu from './navDetails/onemenu.vue'
import groupMenu from './navDetails/groupmenu.vue'

import { getMenuData, getmenuActive } from '@/utils/getData.ts'
@Component({
  components: {
    oneMenu,
    groupMenu
  }
})
export default class Nav extends Vue {
  private menuList: MenuItem[] = []
  private defult: string = ''
  private created() {
    getMenuData().then((data: MenuItem[]) => {
      this.menuList = data
    })
    this.defult = getmenuActive().id
  }
  private componentId(data: MenuItem) {
    return data.children && data.children.length > 0 ? 'groupMenu' : 'oneMenu'
  }
}
</script>

<style lang="stylus" scoped>
.menu
  height 100%
  overflow-y auto
  voerflow-x hidden
&::-webkit-scrollbar
  /* 滚动条整体样式 */
  /* 高宽分别对应横竖滚动条的尺寸 */
  width 1px
  height 0px
&::-webkit-scrollbar-thumb
  /* 滚动条里面小方块 */
  border-radius 1px
  box-shadow inset 0 0 5px rgba(0, 0, 0, 0.2)
  background #535353
&::-webkit-scrollbar-track
  /* 滚动条里面轨道 */
  box-shadow inset 0 0 5px rgba(0, 0, 0, 0.2)
  border-radius 1px
  background #ededed
</style>
